<template>
  <n-form-item :label="label" :path="name">
    <n-select v-bind="$attrs" :options="options" :value="value"
              :default-value="value"
              @update:value="(val)=>$emit('update:value',val)" clearable />
  </n-form-item>
</template>
<script setup>

const props = defineProps({
  label:String,
  name:String,
  required:Boolean,
  rules:Object,
  data:Array,
  value: [String,Number,null,Array]
})
const options = computed(()=>{
  const data  = props.data;
  let newOptions = []
  if (data && data.length>0){
      data.forEach(item=>{
        let newItem = {}
        item?.id && (newItem['value'] = item.id)
        item?.value && (newItem['value'] = item.value)
        item?.name && (newItem['label'] = item.name)
        item?.label && (newItem['label'] = item.label)
        newOptions.push(newItem);
      })
  }
  return newOptions;
})

const emit = defineEmits(['loadRules','update:value'])
onMounted(()=>{
  emit('loadRules',props)
})
</script>